<template>
  <div>
    <div class="login-method">
      <img :src="require('pc_img/login/二维码.png')" alt="" class="QrBtn"  @click="showQrLogin"/>
      <!-- <img src="./images/电脑.png')" alt=""> -->
    </div>
    <!-- 账户登录 -->
    <div class="login-form">
      <div class="login">
        <div
          :class="isShow_user ? 'user-login tab-active' : 'user-login'"
          @click="change('user')"
        >
          用户登录
        </div>
        <div
          :class="isShow_user ? 'phone-login' : 'phone-login tab-active'"
          @click="change('phone')"
        >
          手机登录
        </div>
      </div>
      <!-- 用户登录 -->
      <div class="user-login-form" v-if="isShow_user && isShow_phone == false">
        <!-- <input class="user-name input" type="text" placeholder="请输入手机号和邮箱">
                    <input class="password input" type="password" placeholder="请输入密码"> -->
        <div class="input-box">
          <div class="input-concrol">
            <div class="input-text">
              <input name="user-name" class="input-text-input" type="text" />
              <Label class="input-text-label">请输入手机号和邮箱</Label>
            </div>
          </div>
        </div>
        <div class="input-box">
          <div class="input-concrol">
            <div class="input-text">
              <input name="password" class="input-text-input" type="text" />
              <Label class="input-text-label">请输入密码</Label>
            </div>
          </div>
        </div>
        <button class="btn-login">登录</button>
        <tool path='/register' text='注册'></tool>
      </div>
      <!-- 手机登录 -->
      <div class="phone-login-form" v-else>
        <!-- <input class="phone-num input" type="text" placeholder="请输入手机号"> -->
        <div class="input-box">
          <div class="input-concrol">
            <div class="input-text">
              <input
                name="login-phone-num"
                class="input-text-input"
                type="text"
              />
              <Label class="input-text-label">请输入手机号</Label>
            </div>
          </div>
        </div>
        <div class="verification">
          <!-- <input class="verification-code input" type="text" placeholder="请输入验证码"> -->
          <div class="input-box">
            <div class="input-concrol">
              <div class="input-text">
                <input
                  name="verification-code"
                  class="input-text-input"
                  type="text"
                />
                <Label class="input-text-label">请输入验证码</Label>
              </div>
            </div>
          </div>
          <span class="obtain-verification-code">获取验证码</span>
        </div>

        <button class="btn-login">登录</button>
        <tool path='/register' text='注册'></tool>
      </div>
      <!-- 其他登录方式 -->
      <div class="other-login">
        <span class="text">其他登录方式</span>
        <ul class="login-items">
          <li class="item">
            <img :src="require('pc_img/login/qqicon.png')" alt="" />
          </li>
          <li class="item">
            <img :src="require('pc_img/login/微博.png')" alt="" />
          </li>
          <li class="item">
            <img :src="require('pc_img/login/支付宝.png')" alt="" />
          </li>
          <li class="item">
            <img :src="require('pc_img/login/微信标志.png')" alt="" />
          </li>
        </ul>
      </div>
    </div>
    <!-- 扫码登录 -->
    <QrLogin v-if='isQrLogin'></QrLogin>
  </div>
</template>
<script>
import mixinPcLoginDialog from '../../../../mixins/pc_login_dialog'
const tool = () => import('./tool.vue')
const QrLogin = () => import('./QrLogin.vue')
// const mixin_pc_login_dialog=() => import('./../../../../mixins/pc_login_dialog')
export default {
  mixins: [ mixinPcLoginDialog ], // 扫码登录的mixins
  data () {
    return {
      isShow_user: true,
      isShow_phone: false
    }
  },
  components: {
    tool,
    QrLogin // 扫码登录
  },
  methods: {
    change (type) { // 切换登录方式
      if (type === 'user') {
        this.isShow_user = true
        this.isShow_phone = false
      } else {
        this.isShow_user = false
        this.isShow_phone = true
      }
    },
    showQrLogin () { // 扫码登录
      this.changeQrLogin(true) // 来自于mixins中的methods
    }
  }
}
</script>
